<template>
  <div>
    <!-- table:表格对应的数据 -->
    <!-- row-key="id":表格选择的依据,通过id选择,必填项 -->
    <!-- default-expand-all:自动展开数据 -->
    <!-- tree-props:属性数据的属性 -->
    <!-- 1.引入表格和创建依赖数据 -->
    <!-- 4.改变表格对应的字段值 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="firstcatename" label="一级分类"> </el-table-column>
      <el-table-column prop="secondcatename" label="二级分类">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称"> </el-table-column>
      <el-table-column prop="price" label="商品价格"> </el-table-column>
      <el-table-column prop="market_price" label="市场价格"> </el-table-column>
      <el-table-column prop="img" label="商品图片（文件）" width="100">
        <template slot-scope="scope">
          <img v-if="scope.row.img" :src="$host + scope.row.img" width="50" />
        </template>
      </el-table-column>
      <el-table-column prop="specsattr" label="商品规格属性"> </el-table-column>
      <!-- 5.switch功能  
      active-color="" 选中的颜色
      inactive-color="" 关闭的颜色
      :active-value="1" 选中的值
      :inactive-value="0" 未选中的值
      @change="itemchange"自带change方法 有一个值，是开启和关闭对应的值
      -->
      <el-table-column prop="isnew" label="是否新品">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isnew"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="itemchange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖推荐">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.ishot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="itemchange(scope.row)"
          ></el-switch> </template
      ></el-table-column>

      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
          <!-- {{ scope.row }} 是作用域接收的本条全部数据-->
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column prop="icon" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- 
    1.总条数，（后端知道，前端不知道，要发送请求，
    2.每页显示几条？
    3.分成几页=总条数/每页显示条数，有余数就向上取整，
    4.当前页码数） -->
    <!-- 
    current-change：修改页面，就是跳转页面
    current-page：页码数
    page-size：每页显示几条
    layout：要显示的上一页\下一页的控件
    total:总条数 
    -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="size"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
/*  导入请求接口 */
// 1 获取用户数据总条数
import {
  getGoodsCount,
  getGoodsList,
  goodsEdit,
  goodsDelete,
} from "../../api.js";

export default {
  data() {
    return {
      // 2.表格数据 > 商品列表
      tableData: [],
      // 1.1将分页控件依赖项配置好
      // 1.2当前页码数为几
      currentPage: 1,
      // 1.3每页显示几条
      size: 5,
      // 1.4数据总条数
      total: 1,
    };
  },
  created() {
    // 1.3 请求商品总数，因为要在点击后再次调用，所以进行封装，请求放在函数中
    // 1.4 获取总的页数先渲染分页控件
    this.getTableList();

    // 2.1获取商品列表
    this.getgoodslist();
  },
  methods: {
    // 01.4 通过ele封装的方法获取当前页的函数
    handleCurrentChange(val) {
      // val > 当前页码
      // 01.5 将当前点击页赋值给data中对应的键
      this.currentPage = val;
      // 01.6 在点击新的页数后，数据更新，再次调用更新列表的函数，该函数会携带最新的页数去后台请求，驱动页面更新
      this.getgoodslist();
    },
    /* 1.4 获取商品总数 */
    async getTableList() {
      let res = await getGoodsCount();
      this.total = res.list[0].total;
      // ele会自动计算分页器显示多少页
      // 通过此函数调用获取用户列表函数
    },
    // 2.2 获取商品列表
    async getgoodslist() {
      //  2.3 传当前的条数和当前的页数
      let res = await getGoodsList({
        size: this.size,
        page: this.currentPage,
      });

      // 2.4 将当前相应的数据给表格进行渲染
      this.tableData = res.list;
    },
    // 4.switch 选择器
    async itemchange(val) {
      // console.log(val);
      let obj = { ...val };

      // 4.1更新完再次提交修改该表单的数据
      obj.firstcatename ? delete obj.firstcatename : "";
      obj.secondcatename ? delete obj.secondcatename : "";
      // 4.formdata格式的数据

      let formdata = new FormData();
      for (const key in obj) {
        // console.log(key);
        formdata.append(key, obj[key]);
      }

      let res = await goodsEdit(formdata);
    },

    // 更新分页器
    updataTotal() {
      this.getTableList();
      this.getgoodslist({
        size: this.size,
        page: this.currentPage,
      });
    },
    /* 编辑功能 */
    /* list子->index父元素->info子元素 */
    edit(info) {
      this.$emit("edit", info);
    },
    /* 删除功能 */
    del(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 确认删除走then分支
        .then(async () => {
          /* 导入接口，传入必要的参数id */
          let res = await goodsDelete({ id });
          /* 将返回的新数据直接赋值给表格,减少一次请求，直接更新数据 */
          // this.updataTotal();
          this.tableData = res.list;
          this.updataTotal();
          /* 对删除状态进行提示 */
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          // this.getTableList();
        })
        //取消删除走.catch分支
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
</style>